<nav class="nav-bar" ng-class="{'__collapsed': menu.isCollapsed}"     
    ng-init="itemTemplateUrl = '$(Platform)/Scripts/app/navigation/menu/mainMenu-item.tpl.html'">

    <ng-transclude> </ng-transclude>

    <div class="bar">
        <div class="wrapper">
            <div class="list __items" va-tooltip-options tooltip-enable="menu.isCollapsed" tooltip-append-to-body="true"
                tooltip-placement="{{$root.isRTL ? 'left' : 'right'}}" tooltip-animation="false">
                <div class="list-item" ng-click="toggleCollapsed()">
                    <a class="list-link">
                        <i class="list-ico list-toggle fa fa-fw fa-bars"></i>
                    </a>
                </div>
                <ul>
                    <li class="list-item"
                        ng-class="{'__has-dropdown': menuItem.children.length > 0, '__animated': menuItem.isAnimated}"
                        ng-repeat="menuItem in menu.items | filter: { path: '!more', isAlwaysOnBar: 'true', isFavorite: 'false' }"
                        ng-include="itemTemplateUrl" ng-click="selectItem(menuItem)" va-tooltip
                        tooltip="{{menuItem.title | translate}}" va-permission="{{menuItem.permission}}"></li>
                </ul>
                <div class="divider"></div>
                <div class="outer-wrapper">
                    <div class="inner-wrapper">
                        <div class="content">
                            <ul ng-model="dynamicMenuItems" ui-sortable="sortableOptions">
                                <li class="list-item"
                                    ng-class="{'__has-dropdown': menuItem.children.length > 0 || menuItem.path == 'more', '__animated': menuItem.isAnimated, '__draggable': !menuItem.isAlwaysOnBar, '__selected': menuItem.path == currentMenuItem.path }"
                                    ng-repeat="menuItem in dynamicMenuItems" ng-include="itemTemplateUrl"
                                    ng-click="selectItem(menuItem)" va-tooltip tooltip="{{menuItem.title | translate}}"
                                    va-permission="{{menuItem.permission}}"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="dropdown" ng-class="{'__more': currentMenuItem.path == 'more', '__opened': showSubMenu}"
        ng-init="searchText = { value: '' }">
        <a class="dropdown-close" ng-click="showSubMenu = false">×</a>
        <div class="dropdown-head" ng-if="!currentMenuItem.headerTemplate">
        </div>
        <ng-include src="currentMenuItem.headerTemplate"></ng-include>
        <div class="dropdown-content" ng-if="!currentMenuItem.contentTemplate">
            <ul class="list">
                <li class="list-item" ng-repeat="menuItem in currentMenuItem.children" ng-include="itemTemplateUrl"
                    ng-click="selectItem(menuItem)" va-permission="{{menuItem.permission}}">
                </li>
            </ul>
        </div>
        <ng-include src="currentMenuItem.contentTemplate"></ng-include>
    </div>

    <div class="links-menu" ng-show="menu.showAppsMenu">
        <div class="links-menu__top">
            <button class="links-menu__button" ng-click="toggleAppsMenu()">
                <svg class="links-menu__icon" viewBox="0 0 22 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="2.53846" cy="2.53846" r="2.53846"></circle>
                    <ellipse cx="10.9999" cy="2.53846" rx="2.53846" ry="2.53846"></ellipse>
                    <ellipse cx="19.4616" cy="2.53846" rx="2.53846" ry="2.53846"></ellipse>
                    <ellipse cx="2.53846" cy="11" rx="2.53846" ry="2.53846"></ellipse>
                    <ellipse cx="2.53846" cy="19.4615" rx="2.53846" ry="2.53846"></ellipse>
                    <circle cx="10.9999" cy="11" r="2.53846"></circle>
                    <circle cx="10.9999" cy="19.4615" r="2.53846"></circle>
                    <circle cx="19.4616" cy="11" r="2.53846"></circle>
                    <circle cx="19.4616" cy="19.4615" r="2.53846"></circle>
                </svg>
            </button>
            <div class="links-menu__title">Applications</div>
        </div>
      <div class="links-menu__list">
          <div class="links-menu__links">
              <a ng-repeat="appItem in menu.apps" target="_blank" href="{{appItem.relativeUrl}}" va-permission="{{appItem.permission}}" class="links-menu__link links-menu__link--active" >
                  <img class="links-menu__img" ng-src="{{appItem.iconUrl}}" alt="{{appItem.description}}">
                  <div class="links-menu__text">{{appItem.title}}</div>
              </a>
          </div>
      </div>
    </div>
</nav>
